import React, {PureComponent} from "react";
import {connect} from "react-redux";
import imgUrl from "../../img/dark_heart.jpg";
import {actionCreator} from "./store";

//http://www.wanandroid.com/article/list/0/json?cid=60
class SystemListComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.handlerMouseClipDown = this.handlerMouseClipDown.bind(this);
    }

    render() {

        return (
            <ul style={ulItemStyle}>
                {
                    this.props.systemArtList.map((item) => {

                        return (
                            <li style={liItemStyle} key={item.get("id")}>

                                <img style={loveHeartNormalStyle} src={imgUrl} alt={"alt"}/>

                                <div style={systemItemWrapperStyle}>
                                    <div style={systemItemTitleStyle} dangerouslySetInnerHTML={{__html:item.get("title")}}/>
                                    <div style={systemItemBodyStyle}>
                                        <span style={systemItemItemTitleStyle}>作者:</span>
                                        <span style={systemItemItemContentStyle}>{item.get("author")}</span>
                                        <span style={systemItemItemTitleStyle}>{`时间:${item.get("niceDate")}`}</span>
                                    </div>
                                </div>

                            </li>
                        );
                    })


                }

            </ul>
        );
    }

    componentDidMount() {
        window.addEventListener("scroll", this.handlerMouseClipDown);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handlerMouseClipDown)
    }

    handlerMouseClipDown() {
        console.log("鼠标滑动事件"+this.props.updateTag);
        if (this.props.updateTag) {
            const clientHeight = document.documentElement.clientHeight;
            const scrollTop = document.documentElement.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight;
            const number = Math.ceil(clientHeight + scrollTop);

            if ( number === scrollHeight) {
                this.props.canRequest(false);
                const currentIndex = this.props.artPage + 1;
                this.props.requestSystemArticleData(this.props.cid, currentIndex);
            }
        } else {
            console.log("正在请求网络");
        }
    }

}


//systemArtList:[],
//     artPage:[],
//逻辑 这边只接收 url 地址和改变页码的功能,
const mapState = (state) => {

    return {
        systemArtList: state.getIn(["systemReducer", "systemArtList"]),
        artPage: state.getIn(["systemReducer", "artPage"]),
        updateTag: state.getIn(["systemReducer", "updateTag"]),
        cid: state.getIn(["systemReducer", "cid"]),
    }
};

const disState = (dispatch) => {
    return {
        requestSystemArticleData(url, page) {
            const action = actionCreator.requestSystemArticleData(url, page);
            dispatch(action);
        }, canRequest(bool) {
            const action = actionCreator.canRequestSystemData(bool);
            dispatch(action);
        }

    }
};
export default connect(mapState, disState)(SystemListComponent);

const ulItemStyle = {
    backgroundColor: "#fff",
};

const liItemStyle = {
    display: "block",
    height: 94,
    borderBottom: "solid 1px #e2e2e2",
    paddingLeft: 30,
    cursor: "pointer",
};

const loveHeartNormalStyle = {
    float: "left",
    marginTop: 38,
};

const systemItemWrapperStyle = {
    float: 'left',
    marginLeft: 10,
    marginTop: 24,
};

const systemItemTitleStyle = {
    color: "#2e3135",
    fontSize: 18,
    fontWeight: 'bold',
};

const systemItemBodyStyle = {
    marginTop: 12,
};


const systemItemItemTitleStyle = {
    fontSize: 14,
    color: "#999",
    marginRight: 10,
};

const systemItemItemContentStyle = {
    fontSize: 14,
    color: "#484848",
    marginRight: 10,
};